<template>
  <div template style="padding-bottom: 60px; max-width: 600px;min-width: 200px;margin-right: 152px;" class="maxW">
    <div class="wraps">
      <div class="wrapsitem">
        <div class="wrapsitemin" style="padding:0 10px;height:131px;color: #f3ff4f;">
          <div style="padding: 10px 0;margin-bottom: 10px; border-bottom: 1px solid yellow;font-weight: 800;">价值观</div>
          富强、民主、文明、和谐<br>
          自由、平等、公正、法治<br>
          爱国、敬业、诚信、友善
        </div>
      </div>
      <template v-for="(v, i) in $root.menusarr" :key="i">
        <b style="font-weight: normal;">
          <div class="wrapsitem" style="min-width: 70px;cursor: pointer;" v-if="v.name == '央视网'"
            @click="ifplay = !ifplay, audioset()">
            <div class="wrapsitemin" style="color: white;line-height: 55px;text-align: center;">
              <img src="../assets/pause.png" v-if="ifplay" style="position: relative;top:10px; width: 30px;height:30px;"
                alt="">
              <img src="../assets/play.png" v-else style="position: relative;top:10px; width: 30px;height:30px;" alt="">
            </div>
          </div>
          <div class="wrapsitem" style="cursor: pointer;" :style="v.name == '央视网' ? 'min-width: 70px;' : ''"
            v-if="v.type == 'main'" @click="tolink(v)">
            <div class="wrapsitemin" style="color: white;">
              {{ v.name }}
            </div>
          </div>
        </b>
      </template>
      <div style="clear: both;"></div>
      <div style="position: relative;overflow: hidden;height: 0;">
        <audio id="audios" src="./music.mp3" @ended="ifplay = 0"></audio>
      </div>
    </div>
    <!-- voice frame -->
    <voices :ifplay="ifplay"></voices>
  </div>
</template>

<script>
import voices from '../components/voices.vue'
export default {
  data() {
    return {
      ifplay: 0
    }
  },
  components: {
    voices
  },
  methods: {
    tolink(v) {
      window.open(v.link)
    },
    audioset() {
      this.ifplay == 1 ? document.getElementById('audios').play() : document.getElementById('audios').pause()
    }
  }
}
</script>

<style scoped>
.wraps {
  min-width: 210px;
  padding: 120px 0 0 40px;
}

.wrapsitem {
  float: left;
  margin: 0 10px 10px 0;
  min-width: 150px;
  background-color: rgba(200, 200, 200, 0.4);
  box-shadow: 2px 2px 0px 0px #8d6262;
}

.wrapsitemin {
  max-width: 320px;
  min-height: 60px;
  border: 1px solid #fff;
}

@media (max-width:800px) {
  .maxW {
    max-width: 500px !important;
  }
}
</style>